import React from 'react';
import DelButton from '../../components/delbutton';
import api from '../../atoms/api';
import EditButton from '../../components/editbutton';

export default function Card({ data }: {
	data: ITbteacherlist;
	// url: `/teacher/registration1?id=${ITbteacherlist['teacher_id']}`;
}) {
	return <>
		<div className='card'>
			<div className='avatar'>
				{data.picture && <img src={data.picture} />}
			</div>
			<div className='info'>
				<span>教师编号:{data.teacher_id}</span>
				<span>教师姓名:{data.teachername}</span>
				<div className='btns'>
					<a href='/teacher/teacher1'>
						<img src='/icons/edit.svg' />
						<span>编辑</span>
					</a>
					<DelButton query={{
						id: data.teacher_id
					}} dlgtitle='确认删除' api={api['/api/teacher/del']} />
				</div>
			</div>
		</div>
		<style jsx>{`
.btns{
display: flex;
flex-direction: row;
justify - content: space - around;
margin - top: 1rem;
}
.card{
	display: flex;
	flex - direction: row;
	padding: 1rem;
	margin: 1rem;
	background - color: #fff;
}
.avatar{
	width: 5rem;
	height: 5rem;
}
.info{
	display: flex;
	flex - direction: column;
	justify - content: center;
	align - items: center;
}
`}</style>
	</>;
}
